<template>
  <div id="map"></div>
</template>

<script setup>
import mapboxGl from "mapbox-gl";
import { onMounted } from "vue";
mapboxGl.accessToken = import.meta.env.VITE_TOKEN;
import { app } from "../main";
onMounted(() => {
  const map = new mapboxGl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/streets-v12",
    center: [114.3, 30.5],
  });
  app.provide("$map", map);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
</style>
